<div id="cal-day-box">		
	<!-- chaohung , 20190117 , modify UI-->
	<div class="row-fluid clearfix cal-row-head" style="height:35px"></div>	
	
	<hr width="100%" color="#e1e1e1" size="1" style="margin-top: 0px;margin-bottom: 2px;border: 0;border-top: 1px solid #eee;margin-left: 0px;margin-right: 0px;"></hr>
	<div class="scrollbar-inner2 scrollbar-inner-day" >
	<div id="cal-day-panel" class="clearfix">	
	
		<!--<div id="cal-day-panel-hour" >			
		
		 <div class="scrollbar-inner" style="height:600px">		
			<table border="1" style="border:#e1e1e1;overflow-y: scroll;height: 640px;display: block;">
			<% for(i = 0; i < hours; i++){ %>
				<div class="cal-day-hour">
					<tr>
						<td rowspan="2" class="row-fluid cal-day-hour-part j-cal-hour" data-cal-hour="<%= cal._hour(i, 0)%>" style="width:140px;height:140px;vertical-align:top;text-align: center">							
								<% if(i<10) {%>
								<span style="font-weight:bold;font-size:15px;">0<%= i %></span>																
								<% } else { %>
								<span style="font-weight:bold;font-size:15px;"><%= i %></span>	
								<% }; %>						
						</td> 					
						<td class="j-cal-hour span11 col-xs-11" data-cal-hour="<%= cal._hour(i, 0) %>" style="width:97%;"></td>   												
					</tr>
					<tr>
    					<td class="j-cal-hour span11 col-xs-11" data-cal-hour="<%= cal._hour(i, 1) %>">
    					</td>    				
    				</tr>			    
				</div>
			<% }; %>
			</table>
			</div>
		</div> -->
						
	
		<!-- <% _.each(by_hour, function(event){ %>
			<div class="pull-left day-event day-highlight" style="margin-top: <%= (event.top * 70) %>px; height: <%= (event.lines * 70) %>px;margin-left:-20px;width:97%">
			
				<span class="cal-hours" style="color:white;"><%= event.start_hour %> - <%= event.end_hour %></span>
				<a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
				   data-event-class="<%= event['class'] %>" class="event-item">
					<%= event.title %></a>
			</div>
		<% }); %> -->
	
		
		<div id="cal-day-panel-hour" >
		
			<% for(i = 0; i < hours; i++){ %>
				<div class="cal-day-hour">
					<% for(l = 0; l < cal._hour_min(i); l++){ %>
					
					<!-- chaohung , 20190111 , add meeting -->
						<!-- chaohung , 20190122 , add data information , fix add meeting error -->
						<div class="row-fluid cal-day-hour-part j-cal-hour" data-cal-hour="<%= cal._hour(i, l) %>" data-cal-date="<%= start.getFullYear() %>-<%= start.getMonthFormatted() %>-<%= start.getDateFormatted() %>" style="height:70px;">
							<div class="span1 col-xs-1" data-cal-hour="<%= cal._hour(i, l) %>"><b><%= cal._hour(i, l) %></b></div>
							<div class="span11 col-xs-11" data-cal-hour="<%= cal._hour(i, l) %>"></div>
						</div>
				<% }; %>
				</div>
			<% }; %>
		</div>
		<% _.each(by_hour, function(event){ %>
			<div class="pull-left day-event day-highlight dh-<%= event['class'] %>" style="margin-top: <%= (event.top * 70) %>px; height: <%= (event.lines * 70) %>px;margin-left:-20px;width:97%">
				<span class="cal-hours" style="color:white;"><%= event.start_hour %> - <%= event.end_hour %></span>
				<a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
				   data-event-class="<%= event['class'] %>" class="event-item">
					<%= event.title %></a>
			</div>
		<% }); %>
		
	</div>	
	</div>		
</div>

<script type="text/javascript">
$(function () {
	$('.scrollbar-inner2').scrollbar();	
});
</script> 